<template>
  <div class="shooseTime">
    <span class="time">时间：</span>
    <div class="shooseTimes">
      <div class="selectTime" @click="selectStartData">{{selectedValue}}</div>
      <div class="line"></div>
      <div class="selectTime" @click="selectEndData">{{selectedEndValue}}</div>
    </div>
    <div class="name">
      <div>{{SET_USERINFO.name}}</div>
      <div class="shoose" @click="show = true">{{name}}</div>
    </div>
    <mt-datetime-picker
      lockScroll="true"
      ref="datePicker"
      v-model="dateVal"
      class="myPicker"
      type="date"
      :startDate="startDate"
      :endDate="endDate"
      year-format="{value}"
      month-format="{value}"
      @confirm="dateConfirm()"
      @touchmove.native.stop.prevent
    ></mt-datetime-picker>
    <mt-datetime-picker
      lockScroll="true"
      ref="datePickers"
      v-model="dateEndVal"
      class="myPicker"
      type="date"
      :startDate="startDate"
      :endDate="endDate"
      year-format="{value}"
      month-format="{value}"
      @confirm="dateEndConfirm()"
      @touchmove.native.stop.prevent
    ></mt-datetime-picker>
    <van-dialog
      v-model="show"
      title="选择对比人"
      :close-on-click-overlay="true"
      show-cancel-button
      :showConfirmButton="false"
      class="padding"
    >
      <div class="input_h">
        <div class="border">
          <van-field
            v-model="value"
            input-align="center"
            @input="blur"
            placeholder="请输入手机号或者姓名"
            clearable
          />
        </div>
        <div class="searchList">
          <div
            v-for="(item, index) in searchList"
            :key="index"
            class="cell"
            @click="chooseName(item.id, item.name)"
          >
            {{item.name}}
            <span style="font-size: 0.21rem;">({{item.phone}})</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { Dialog } from "vant";
export default {
  data() {
    return {
      dateVal: "",
      dateEndVal: "",
      selectedValue: "",
      selectedEndValue: "",
      show: false,
      userId: "",
      value: "",
      name: "选择对手",
      searchList: [],
      startDate: new Date("2018/01/01"),
      endDate: new Date()
    };
  },
  computed: {
    ...mapGetters(["SET_USERINFO"]),
    getCurrentDate() {
      let date = new Date();
      let getYear = date.getFullYear();
      let getMonth = date.getMonth() + 1;
      let getDate = date.getDate();
      if (getMonth < 10) getMonth = `0${getMonth}`;
      if (getDate < 10) getDate = `0${getDate}`;
      let toDay = `${getYear}-${getMonth}-${getDate}`;
      return toDay;
    },
    getAfterYearDate() {
      let date = new Date();
      let getYear = date.getFullYear() - 1;
      let getMonth = date.getMonth() + 1;
      let getDate = date.getDate();
      if (getMonth < 10) getMonth = `0${getMonth}`;
      if (getDate < 10) getDate = `0${getDate}`;
      let toDay = `${getYear}-${getMonth}-${getDate}`;
      return toDay;
    }
  },
  created() {
    this.userArr();
    this.selectedValue = this.getAfterYearDate;
    this.selectedEndValue = this.getCurrentDate;
  },
  methods: {
    blur() {
      this.userArr();
    },
    chooseName(id, name) {
      this.name = name;
      this.userId = id;
      this.$emit("shooseTime", {
        start: this.selectedValue,
        end: this.selectedEndValue,
        userId: this.userId,
        name: this.name
      });
      this.show = false;
    },
    userArr() {
      var params = new URLSearchParams();
      params.append("search", this.value);
      this.$axios
        .post("/mobile/v1/PersonalCenter/search_user", params, {
          headers: {
            token: window.sessionStorage.getItem("token")
          }
        })
        .then(res => {
          if ((res.data.code = 2000)) {
            this.searchList = res.data.data;
          }
        })
        .catch(res => {});
    },
    choose() {},
    selectStartData() {
      this.dateVal = this.getAfterYearDate;
      this.$refs["datePicker"].open();
    },
    selectEndData() {
      this.dateEndVal = new Date();
      this.$refs["datePickers"].open();
    },
    dateConfirm() {
      let year = this.dateVal.getFullYear();
      let month = this.dateVal.getMonth() + 1;
      let strDate = this.dateVal.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (strDate < 10) {
        strDate = "0" + strDate;
      }
      this.selectedValue = year + "-" + month + "-" + strDate;
      this.$emit("shooseTime", {
        start: this.selectedValue,
        end: this.selectedEndValue,
        userId: this.userId
      });
    },
    dateEndConfirm() {
      let year = this.dateEndVal.getFullYear();
      let month = this.dateEndVal.getMonth() + 1;
      let strDate = this.dateEndVal.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (strDate < 10) {
        strDate = "0" + strDate;
      }
      this.selectedEndValue = year + "-" + month + "-" + strDate;
      this.$emit("shooseTime", {
        start: this.selectedValue,
        end: this.selectedEndValue,
        userId: this.userId
      });
    }
  }
};
</script>
<style lang="less" scoped>
.cell {
  padding: 0.2rem;
  border-bottom: 1px solid #ebedf0;
}
.input_h {
  height: 5.1rem;
  padding-top: 10px;
}
.searchList {
  text-align: center;
}
.shoose {
  width: 1.6rem;
  height: 0.6rem;
  border: 1px #42b574 solid;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shooseTime {
  position: relative;
}

.time {
  position: absolute;
  top: 0.15rem;
  left: 0.2rem;
}

.shooseTimes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  margin: auto;
  margin-top: 0.34rem;

  .line {
    width: 0.5rem;
    height: 0.1rem;
    margin: 0 0.1rem;
    background: #42b574;
  }

  .selectTime {
    width: 2rem;
    height: 0.6rem;
    border: 1px #42b574 solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.56rem 0 0.34rem;
  padding: 0 0.2rem;
  color: #259b24;

  .disk {
    width: 70%;
    margin: auto;

    span {
      padding: 0 0.1rem;
      margin: 0 0.1rem;
      box-sizing: border-box;
      border: 1px #fff solid;
    }

    .actives {
      border: 1px #259b24 solid;
      box-sizing: border-box;
    }
  }
}

.aces {
  margin-bottom: 0.3rem;

  .aces_title {
    padding: 0 0.2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
  }

  .color {
    display: flex;
    justify-content: space-between;
    height: 0.24rem;
    background: #dddcdc;

    .color_left {
      display: flex;
      justify-content: flex-end;
      width: 50%;

      .color_one {
        height: 100%;
        background: #42b574;
      }
    }

    .color_right {
      display: flex;
      justify-content: flex-start;
      width: 50%;

      .color_one {
        height: 100%;
        background: #42b574;
      }

      .color_two {
        height: 100%;
        background: #c0e6d1;
      }
    }
  }
}
</style>
